<template>
  <div class="address-contain">
    <div v-if="addressList.length > 0">
      <div class="address-list" v-for="item in addressList" :key="item.id">
        <div
          class="box"
          :class="{
            selected: $store.state.address.id == item.id && isShowUseBtn,
          }"
        >
          <div>
            <div class="address">
              <div class="text">
                <div class="info">
                  {{ item.name }} {{ item.tel }} {{ item.province }}{{ item.city }}{{ item.country }}
                </div>
                <div class="particulars">{{ item.address }}</div>
              </div>
              <div class="edit" @click.stop="edit(item)">
                <van-icon name="edit" />
              </div>
            </div>
            <div class="use">
              <van-tag round type="danger" v-if="item.isDefault">默认</van-tag>
              <div v-else></div>
              <van-button @click="checkedAddress(item)" v-if="isShowUseBtn">使用</van-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <van-empty description="暂无地址" v-else> </van-empty>
    <div class="footer">
      <van-button type="danger" @click="$router.push('/incaddress')">添加地址</van-button>
    </div>
  </div>
</template>

<script>
import { getAddress } from "@/api";
export default {
  data() {
    return {
      addressList: [],
      isShowUseBtn: false,
    };
  },
  methods: {
    checkedAddress(item) {
      this.$store.commit("setAddress", item);
      this.$router.push(`/shopcar`);
    },
    edit(item) {
      this.$router.push(`/editaddress/${item.id}`);
    },
  },
  async mounted() {
    let data = await getAddress();
    let bool = data.some((item) => item.isDefault == true);
    if (!bool) {
      if (data[0]) {
        data[0].isDefault = true;
      }
    }
    this.addressList = data;
  },
  // beforeRouteEnter 在调用的时候。组件还没有被创建，不能使用this访问data中的数据
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      if (from.path === "/shopcar") {
        vm.isShowUseBtn = true;
      }
    });
  },
};
</script>

<style lang="scss" scoped>
.address-contain {
  .address-list {
    position: relative;

    .selected::before {
      position: absolute;
      right: 3px;
      bottom: 0;
      z-index: 10;
      color: white;
      content: "√";
    }

    .selected::after {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 0;
      height: 0;
      content: "";
      border-color: red transparent; /* 上下颜色 左右颜色 */
      border-style: solid;
      border-width: 0 0 40px 30px;
    }

    .box {
      margin-bottom: 7px;
      background: #fff;

      .address {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 12px 0;
        border-radius: 6px;

        .van-icon {
          color: #969799;
        }

        .text {
          display: flex;
          flex-direction: column;
          line-height: 20px;

          .info {
            margin-bottom: 5px;
            font-size: 16px;
          }

          .particulars {
            font-size: 13px;
          }
        }

        .edit {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 50px;
          height: 50px;
        }
      }

      .use {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 5px 15px;
      }
    }
  }

  .van-empty {
    .van-button {
      width: 300px;
    }
  }

  .footer {
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 5px;
    background: #fff;

    .van-button {
      width: 90%;
      border-radius: 20px;
    }
  }
}
</style>
